<!-- 财务设置->结算方式 -->
<template>
    <div class="content-wrapper a-base-container">
        <div class="business-big-box" style="margin:2px 8px;">
            <div class="btn-wrapper clearfix">
                <a-row class="text-center clearfix">
                    <a-col :xs="24" :sm="24" :md="24" :lg="16" :xl="12">
                        <a-col :span="2" v-if="permissions.includes('settlement:add')">
                            <div class="btns" @click="add">
                                <a-icon class="btns-icon" type="file-add" />
                                <div class="btns-text">新增</div>
                            </div>
                        </a-col>
                        <a-col :span="2" v-if="permissions.includes('settlement:edit')">
                            <div class="btns" @click="edit">
                                <a-icon class="btns-icon" type="edit" />
                                <div class="btns-text">修改</div>
                            </div>
                        </a-col>
                        <a-col :span="2" v-if="permissions.includes('settlement:delete')">
                            <div class="btns" @click="remove">
                                <a-icon class="btns-icon" type="delete" />
                                <div class="btns-text">删除</div>
                            </div>
                        </a-col>
                    </a-col>
                </a-row>
            </div>
            <div class="resize-table-container" style="width:800px">
                <a-table :columns="columns" :data-source="data" bordered :scroll="{ x: 0, y: 500}" :pagination="pagination" style="font-size: 12px;" :row-selection="{selectedRowKeys: selectedKeys, onChange: selection,columnWidth:20}" @change="onTableChange">
                </a-table>
            </div>

            <a-modal v-model="editModal" :title="editItem.id ? '编辑结算方式' : '新增结算方式'" centered width="500px">
                <div id="components-form-demo-advanced-search">
                    <a-form class="ant-advanced-search-form" :form="form" :label-col="{ span: 8 }" :wrapper-col="{ span: 16}" @submit="handleSubmit">
                        <a-row :span="24">
                            <a-col :span="24">
                                <a-form-item label="编码规则">
                                    <span style="color:red">{{ruleCode}}</span>
                                    <!-- <span style="margin-left:184px;color:#1890ff;cursor: pointer;" @click="codeSetHandler">编码设置</span> -->
                                </a-form-item>
                            </a-col>
                            <a-col :span="24">
                                <a-form-item label="结算方式编码">
                                    <a-input v-model="editItem.code" autocomplete="off" v-decorator="['code', { rules: [{ required: true, message: '结算方式编码不能为空' }] }]" placeholder="请输入结算方式编码" :disabled="isDisabled" />
                                </a-form-item>
                            </a-col>
                            <a-col :span="24">
                                <a-form-item label="结算方式名称">
                                    <a-input v-model="editItem.name" autocomplete="off" v-decorator="['name', { rules: [{ required: true, message: '结算方式名称不能为空' }] }]" placeholder="请输入结算方式名称" />
                                </a-form-item>
                            </a-col>
                            <a-col :span="24">
                                <a-form-item label="默认账户">
                                    <a-input-search read-only v-decorator="['bankAccount', { rules: [{ required: true, message: '默认账户不能为空' }] }]" style="width: 269px" placeholder="请输入默认账户" @search="handleSearch('currencyRef')" @click="handleSearch('currencyRef')" :disabled="isDisabled" />
                                    <form-search-group ref="currencyRef" :dynamicData="{code:'bank',name:'银行账户',val:'bank',value:editItem.bankAccount}" @clickItem="setValue"></form-search-group>
                                </a-form-item>
                            </a-col>
                        </a-row>
                    </a-form>
                </div>
                <template slot="footer">
                    <a-button type="primary" html-type="submit" @click="handleSubmit" v-if="permissions.includes('settlement:save')">保存</a-button>
                    <a-button :style="{ marginLeft: '8px' }" @click="() => {editModal = false}">关闭</a-button>
                </template>
            </a-modal>
            <code-set ref="codesetRef" :title="'结算方式编码设置'" @back="getCodeDetail"></code-set>

        </div>
    </div>
</template>
<script>
import { mapState } from "vuex";
import table from "@/mixins/table";
import { pageList, save, deleteSettleStyle } from "@/api/erp/clearMethod";
import FormSearchGroup from '@/components/Form/FormSearchGroup';
import { getCode } from "@/utils/tool/get-code-rules";

import codeSet from '@/components/PopUpLayer/codeSet';


export default {
    mixins: [table],
    components: {
        FormSearchGroup,
        codeSet
    },
    data () {
        const columns = [
            {
                align: "center",
                title: "结算方式编码",
                dataIndex: "code",
                width: 50
            },
            {
                align: "left",
                title: "结算方式名称",
                dataIndex: "name",
                width: 80
            },
            {
                align: "left",
                title: "默认账户",
                dataIndex: "bankAccount",
                width: 120
            },
        ]
        return {
            selectedKeys: [],
            selectedData: {},
            selectedIds: [],
            columns,
            data: [],
            editModal: false,
            editItem: {
                bankAccount: null,
                bankAccountId: null,
            },
            form: this.$form.createForm(this, { name: "advanced_search" }),
            pagination: {
                defaultPageSize: 20,
                current: 1,
                pageSize: 20,
                total: 0,
                showTotal: total => {
                    return (
                        <div>
                            共 {total} 条数据，每页
                            <a-input-number
                                value={this.pagination.pageSize}
                                min={1}
                                max={500}
                                onPressEnter={e => this.changePageSize(e)}
                            />
                            条
                        </div>
                    );
                },
                showQuickJumper: true,
                showLessItems: true
            },
            postData: {
                "current": 1,
                "size": 20
            },
            ruleCode: null,//编码规则
        };
    },
    computed: {
        ...mapState({
            userInfo: state => state.user.info,
            permissions: state => state.user.permissions,
        }),
    },
    mounted () {
        this.PageList();
        this.getCodeDetail();
    },
    methods: {
        codeSetHandler () {
            this.$refs.codesetRef.show();
        },
        getCodeDetail () {
            //获取编码规则(结算方式)
            getCode('settlestyle').then(res => {
                this.ruleCode = res;
                console.log(this.ruleCode);
            })
        },
        handleSearch (n) {
            this.$refs[`${n}`].showModal();
        },
        setValue (data) {
            this.form = this.$form.createForm(this, {
                mapPropsToFields: () => {
                    return {
                        name: this.$form.createFormField({
                            value: this.editItem.name
                        }),
                        code: this.$form.createFormField({
                            value: this.editItem.code
                        }),
                        bankAccount: this.$form.createFormField({
                            value: data.accountName
                        })
                    };
                }
            });
            this.editItem.bankAccountId = data.id;
            this.editItem.bankAccount = data.accountName;
        },
        // 获取列表
        PageList () {
            const { postData } = this;
            pageList(postData).then(response => {
                if (response.code === 200) {
                    const { data } = response;
                    const { records, total, current, size } = data;
                    this.data = records;
                    Object.assign(this.pagination, {
                        total
                    });
                }
            }).catch(error => { });
        },
        handleSubmit (e) {
            e.preventDefault();
            this.form.validateFields((err, values) => {
                let id = this.editItem.id;
                this.editItem = { ...values };
                this.editItem.id = id;
                if (!err) {
                    save(this.editItem).then(response => {
                        if (response.code === 200) {
                            this.$message.success("保存成功");
                            //刷新 列表
                            this.editModal = false;
                            this.PageList();
                            this.selectedKeys = [];
                            this.selectedData = [];
                        }
                    })
                }
            });
        },
        add () {
            this.editModal = true
            this.editItem = {};
            this.form = this.$form.createForm(this, {
                mapPropsToFields: () => {
                    return {
                        name: this.$form.createFormField({
                            value: ''
                        }),
                        code: this.$form.createFormField({
                            value: ''
                        }),
                        bankAccount: this.$form.createFormField({
                            value: ''
                        })
                    };
                }
            });
        },
        edit () {
            if (this.selectedKeys.length != 1) {
                this.$message.warning("请选择一条数据");
                return;
            }
            this.editModal = true
            this.editItem = { ... this.selectedData };
            this.form = this.$form.createForm(this, {
                mapPropsToFields: () => {
                    return {
                        name: this.$form.createFormField({
                            value: this.editItem.name
                        }),
                        code: this.$form.createFormField({
                            value: this.editItem.code
                        }),
                        bankAccount: this.$form.createFormField({
                            value: this.editItem.bankAccount
                        })
                    };
                }
            });
        },
        remove () {
            if (this.selectedKeys.length < 1) {
                this.$message.warning("请选择一条数据");
                return;
            }
            let _this = this;
            this.$confirm({
                title: '提示',
                content: '您确定要删除该项目设置吗？',
                onOk () {
                    deleteSettleStyle(_this.selectedIds).then(res => {
                        if (res.code == 200) {
                            _this.PageList();
                            _this.selectedKeys = [];
                            _this.selectedData = [];
                            _this.$message.success("删除成功");
                        } else {
                            _this.$message.error(res.message);
                        }
                    });
                },
                onCancel () {
                },
            });
        },
        changePageSize (e) {
            const value = e.target.value;
            const { pagination } = this;

            console.log(e, value);
            Object.assign(this.postData, {
                "size": value
            });
            Object.assign(this.pagination, {
                pageSize: Number.parseInt(value)
            });
            this.PageList();
        },
        onTableChange (pagination, filters, sorter) {
            Object.assign(this.postData, {
                "current": pagination.current,
                "size": pagination.pageSize
            });
            Object.assign(this.pagination, {
                current: pagination.current,
                pageSize: pagination.pageSize
            });
            this.PageList();
        },
        onCellChange (item, dataIndex, editValue) {
            if (item[dataIndex] != editValue) {
                const edit = { id: item.id, [dataIndex]: editValue };
                this.TreeSortEditList.set(item.id, edit);
            } else {
                this.TreeSortEditList.delete(item.id);
            }
            console.log([...this.TreeSortEditList.values()]);
        },
        selection (keys, row) {
            this.selectedKeys = [];
            this.selectedKeys = keys;
            this.selectedData = row[0];
            const ids = new Array();
            row.forEach(function (val) {
                ids.push(val.id);
            });
            this.selectedIds = ids;
            console.log("rowKeys", this.selectedData);
        },
    },
};
</script>
<style  scoped>
    .form-inline label {
        justify-content: left !important;
    }
    .form-inline > .col {
        margin-bottom: 1.5rem !important;
    }
    .icons-list >>> .anticon {
        margin-right: 8px;
        font-size: 16px;
    }
    .ant-advanced-search-form {
        padding: 24px;
        background: #fbfbfb;
    }

    .ant-advanced-search-form .ant-form-item {
        display: flex;
        margin-bottom: 0px !important;
    }

    .ant-advanced-search-form .ant-form-item-control-wrapper {
        flex: 1;
    }

    #components-form-demo-advanced-search .ant-form {
        max-width: none;
    }
    #components-form-demo-advanced-search .search-result-list {
        margin-top: 16px;
        background-color: #fafafa;
        min-height: 200px;
        text-align: center;
        padding-top: 80px;
    }
</style>
<style lang="less">
    @import '~@/style/setting/business.less';
</style>
 